<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>auto view &amp; auto link</title>
    
    <script src="../jquery.js"></script>
    <script src="../browser.js"></script>
    <script src="../angular.js"></script>
    <script src="../es6-module-loader.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #wrapper{
            display: flex;
            width: 1200px;
            margin: 0 auto;
            border: 1px solid #ccc;
            background-color: #f5f6f7;
            justify-content: space-around; 
        }
        .hc-dicom-viewer {
            outline: none;
            border: 2px solid #2B2B2B;
        }
        .hc-dicom-viewer:focus {
            border: 2px solid #1BD5DA;
        }
        
    </style>
    <script>            
    	System.transpiler = "babel";
    	System.babelOptions = {
	    	stage: 0
	    };
        System.import("./hc-dicom-parser.es6")
            .then(function(dicom) {
                "use strict";
                let ng        = angular,
                    $wrapper  = $("#wrapper");
            
                let imgData = null;
                
                const PAGE_UP = 33,  /* keycode */
                    PAGE_DOWN = 34;
                    
                /*
                 * show a dicom
                 */
                $(function() {                    
                    let f = $("#file"),   
                        r = new FileReader();
                    
                    r.onload = function() {
                        let parser = new dicom.Parser();
                        parser.parse(r.result);
                        let ctx = $("canvas").get(0).getContext("2d");
                        imgData = parser.fillImageData(ctx.createImageData(512, 512));
                        ctx.putImageData(imgData, 0, 0);
                    }
                    
                    f.on("change", function() {
                        r.readAsArrayBuffer(f.get(0).files[0]);
                    });
                });
            
                ng
                    .module("myapp", [])
                    .controller("MyController", function($scope) {
                        
                    })
                    .directive("hcDicomViewer", function() {
                        return {
                            restrict: "AE",
                            priority: 100,
                            replace: true,
                            scope: {
                                width: "@",
                                height: "@",
                                annotationClass: "@"
//                                mode: {
//                                    "NONE": 0,
//                                    "PAN" : 1,
//                                    "ZOOM": 2,
//                                    "WWWC": 3
//                                }
                            },                            
                            template: 
                                  '<div ' +
                                  '    tabindex="-1"' +   // by specifying tabindex, you can call .focus()
                                  '    class="hc-dicom-viewer"' +
                                  '    style="position: relative;' +
                                  '        width: {{width}}px; height: {{height}}px">' +
                                  '    <canvas' +
                                  '        style="position: absolute;' +
                                  '            z-index: 999;' +
                                  '            left: 0; top: 0;' +
                                  '            width: 100%; height: 100%;' +
                                  '            background-color: #000;">' +
                                  '        your browser does not support canvas' +
                                  '    </canvas>' +
                                  '    <div' +
                                  '        style="position: absolute;' +
                                  '            z-index: 1000;' +
                                  '            left: 0; top: 0;' +
                                  '            width: 100%; height: 100%;' +
                                  '            color: #fff;"' +
                                  '        class="{{annotation}}">' +
                                  '    </div>' +
                                  '</div>',
                            controller: function($scope) {
                                $scope.annotation = $scope.annotationClass || 'annotation';
                            },
                            link: function($scope, $elem, $attrs) {
                                $elem
                                    .on("contextmenu mousedown", function(e) {
                                        e.preventDefault();
                                    }) 
                                    .on("keydown", function(e) {
                                        if (e.keyCode === PAGE_UP && e.keyCode === PAGE_UP) {
                                            e.preventDefault();
                                        }
                                    })
                                    .on("mousedown", function() {
                                        this.focus();
                                    })
                            }
                        }
                    })
                    .directive("autoView", function() {
                        return {
                            restrict: "A",
                            priority: 90, 
                            link: function($scope, $elem, $attrs) { 
                                let offset    = {x: 0, y: 0},
                                    mousedown = false;
                                
                                let c = null;
                                System.import("./hc-canvas.es6.fifth")
                                    .then(function(canvas) {
                                    
                                     c = new canvas.Canvas($("canvas").get(0));
                                
                                });
                                $elem
                                    .addClass("auto-view")
                                    .on("mousedown", function(e) {
                                        offset.x  = e.offsetX;
                                        offset.y  = e.offsetY;
                                        mousedown = true;
                                    })
                                    .on("mouseup mouseout", function(e) {
                                        mousedown = false;
                                    })
                                    .on("mousemove", function(e) {
                                        if (!mousedown) {
                                            return;
                                        }
                                    
                                        let ex  = e.offsetX,
                                            ey  = e.offsetY,
                                            x   = ex - offset.x,
                                            y   = ey - offset.y;
                                        
                                        c.toImage();
                                        console.log(`x: ${x}, y: ${y} - offsetX: ${ex}, offsetY: ${ey}`); 
                                        c.translate(x, y);
                                        
                                        offset.x = ex;
                                        offset.y = ey;
                                    });
                            }
                        }
                    })
                    .directive("autoLink", function() {
                        return {
                            restrict: "A",
                            priority: 80,
                            link: function($scope, $elem, $attrs) {                                 
                                $elem
                                    .addClass("auto-link")
                                    .on("keydown", function(e) { 
                                        if (e.keyCode === PAGE_UP || e.keyCode === PAGE_DOWN) {
                                            console.info(e.keyCode);
                                        }
                                    })
                            }
                        }
                    })
                ;
            
                ng.bootstrap($wrapper, ["myapp"]);
            });
    </script>
</head>
<body>
    <div style="text-align: center;">
        <input type="file" name="file" id="file" ng-click="selectDicom()">
    </div>
    <br>
    <div id="wrapper" ng-controller="MyController">
        <div
           hc-dicom-viewer
           auto-view
           width="512"
           height="512"
           annotation-class="anno">            
        </div>     
        
        <div
           hc-dicom-viewer
           auto-link
           width="512"
           height="512">            
        </div>     
    </div> 
     
</body>
</html>